<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设计癖 - 关注设计癖 发现好设计</title>
    <link rel="icon" href="images/log.ico">
    <style>
        *{
            margin: 0px;
            padding: 0px;  
            list-style: none;
        
        }
        .header{
                width: 100%;
                height: 65px;
                position: fixed;
                background: white;
                top: 0px;
                z-index: 1;
                position: fixed;
         
        }
         .u1{
        margin: 0px 300px;
        }
         .h2 {
        width: 40px;
        height: 40px;
        font-size:28px;
        float: left;
        margin: 13px 10px;
        background: yellow;
        border-radius: 30px;
        text-align: center;
        line-height: 40px;
        transform: rotate(-45deg);       
        box-shadow:0px 0px  10px 5px #aaa; 
        }
        .u2{
        margin:24px 19px;
        }
       .h3{
        font-size: 20px;
        float: right;   
        color: red;
        margin-right: 20px;
        margin-top: -10px;              
        }
        .banner{
                width: 1212px;
                height: 512px;
                margin:25px auto;               
        }
        .l1{
        float: left;
        margin: 5px 10px;
        }
        .list{
            width: 1212px;
            height: 36px;
            margin: 25px auto;
        }
        .con{
            width: 1212px;
            height: 1000px;
            margin: 25px auto;
 
        }
        .c1{
        width: 1210px;
        margin: 0px auto;

    }
    .u5{
        float: left;
    }
    .l5{
        float: left;
        margin: 60px 10px;
    }
        body{background: #f5f5f5;
        }
        .zan{
        width: 50px;
        height: 50px;
        left: 10px;
        top: 10px;
        border-radius: 50px;
        background: yellow;
        position: absolute;
        text-align: center;
        line-height: 50px;
        transform: rotate(-45deg);
        }

        .b4,.b5,.b6,.b7,.b8,.b9,.b10,.b11,.b12,.b13,.b14,.b15{
        width: 325px;
        height: 315px;
        float: left;
        margin: 10px 6px 0px;
        border: 1px solid red;    
        }
        .b4,.b5,.b6,.b7,.b8,.b9,.b10,.b11,.b12,.b13,.b14,.b15{
        position: relative;
        }
    </style>    
</head>
<body>
    
    <div class="header">
        <ul class="u1">
            <li class="h2">赞</li>
            <li class="h2">萌</li>
            <li class="h2">哈</li>
            <li class="h2">艹</li>
            <li class="h2">买</li>
        </ul>  
        <ul class="u2">
            <li class="h3">登录</li>
            <li class="h3">
                <img src="images/fd.ico" alt="">    
            </li>
        </ul>    
    </div>
    <div class="banner">
        <ul>
            <li class="l1"> 
                <a href="">
                <img src="images/s003.jpg" alt="" height="489px">
            </a>
            </li>
            <li class="l1"> 
                <a href="">
                    <img class="i1" src="images/s02.jpg" alt=""  width="290px" height="152px">
                </a>
            </li>
            <li  class="l1"> 
                <a href="">
                    <img class="i1"  src="images/s03.jpg" alt=""  width="290px" height="152px">
                </a>
            </li>
            <li class="l1"> 
                <a href="">
                    <img class="i1"  src="images/s04.jpg" alt=""  width="290px" height="151px">
                </a>
            </li>
        </ul> 
    </div>
    <ul class="list">
        <select name="" id="">
            <option value="">最新</option>
        </select>
        <select name="" id="">
            <option value="">最热</option>
        </select>
        <select name="" id="">
            <option value="">排行</option>
        </select>
        <select name="" id="">
            <option value="">随机</option>
        </select>
    </ul>
    <div class="con">
        <div class="b4">
            <ul>
                <li>
                    <div class="zan">赞</div>
                    <a href="">
                        <img src="images/i01.jpg" alt="">
                    </a>
                    <div>
                        <p>用水才能擦除笔迹，它只想保护好设计师的创意</p>
                    </div>
                    <div>
                        <p>2小时前</p>
                    </div>
                </li>
            </ul>
        </div>
    <div class="b5">
        <ul>
            <li>
                <div class="zan">赞</div>
                <a href="">
                    <img src="images/i02.jpg" alt="">
                </a>
                <div>
                    <p>马桶刷也要有优雅的姿态</p>
                </div>
                <div>
                    <p>2小时前</p>
                </div>
            </li>
        </ul>
    </div>
    <div class="b6">
        <ul>
            <li>
                <div class="zan">赞</div>
                <a href="">
                    <img src="images/i03.jpg" alt="">
                </a>
                <div>
                    <p>健身也走『科技范』，你以为这仅仅只是个瑜伽垫？</p>
                </div>
                <div>
                    <p>2小时前</p>
                </div>
            </li>
        </ul>
    </div>
    <div class="b7">
        <ul>
            <li>
                <div class="zan">赞</div>
                <a href="">
                    <img src="images/i04.jpg" alt="">
                </a>
                <div>
                    <p>牙缝清洁怎么办？牙签牙线都过时了，用『刷子吧』</p>
                </div>
                <div>
                    <p>2小时前</p>
                </div>
            </li>
        </ul>
    </div>
    <div class="b8">
        <ul>
            <li>
                <div class="zan">赞</div>
                <a href="">
                    <img src="images/i05.jpg" alt="">
                </a>
                <div>
                    <p>矮怎么了，照样能够拿到书架顶端的书</p>
                </div>
                <div>
                    <p>2小时前</p>
                </div>
            </li>
        </ul>
    </div>
    <div class="b9">
        <ul>
            <li>
                <div class="zan">赞</div>
                <a href="">
                    <img src="images/i06.png" alt="">
                </a>
                <div>
                    <p>这简直是一场关于肉体的盛宴，无关设计，无关时尚，无关商业......</p>
                </div>
                <div>
                    <p>2小时前</p>
                </div>
            </li>
        </ul>
    </div>
    <div class="b10">
        <ul>
            <li>
                <div class="zan">赞</div>
                <a href="">
                    <img src="images/i07.png" alt="">
                </a>
                <div>
                    <p>中国国际设计节PK世界工业设计会，哪个更棒</p>
                </div>
                <div>
                    <p>2小时前</p>
                </div>
            </li>
        </ul>
    </div>
    <div class="b11">
        <ul>
            <li>
                <div class="zan">赞</div>
                <a href="">
                    <img src="images/i07.jpg" alt="">
                </a>
                <div>
                    <p>首届世界工业设计大会在家门口杭州，中国设计师燥起来</p>
                </div>
                <div>
                    <p>2小时前</p>
                </div>
            </li>
        </ul>
    </div>
    <div class="b12">
        <ul>
            <li>
                <div class="zan">赞</div>
                <a href="">
                    <img src="images/i08.jpg" alt="">
                </a>
                <div>
                    <p>
                        窝在北方的暖炉里，你应该需要这样的一个散热阀门？</p>
                </div>
                <div>
                    <p>2小时前</p>
                </div>
            </li>
        </ul>
    </div>
    <div class="b13">
        <ul>
            <li>
                <div class="zan">赞</div>
                <a href="">
                    <img src="images/i09.jpg" alt="">
                </a>
                <div>
                    <p>
                        废纸打造的铅笔，像是一朵朵落入凡间的花</p>
                </div>
                <div>
                    <p>2小时前</p>
                </div>
            </li>
        </ul>
    </div>
    <div class="b14">
        <ul>
            <li>
                <div class="zan">赞</div>
                <a href="">
                    <img src="images/i10.jpg" alt="">
                </a>
                <div>
                    <p>倚靠在毯子上，这件事听着就让人舒坦</p>
                </div>
                <div>
                    <p>2小时前</p>
                </div>
            </li>
        </ul>
    </div>
    <div class="b15">
        <ul>
            <li>
                <div class="zan">赞</div>
                <a href="">
                    <img src="images/i11.jpg" alt="">
                </a>
                <div>
                    <p>别笑话虚拟键盘没有实体键盘，打字or音乐，它们能说变就能变</p>
                </div>
                <div>
                    <p>2小时前</p>
                </div>
            </li>
        </ul>
    </div>
</div>
<div class="c1">
    <ul class="u5">
        <li class="l5">
            <a href="">
                <img src="images/x01.png" alt="">
            </a>
        </li>
        <li class="l5">
            <a href="">
                <img src="images/x02.png" alt="">
            </a>
        </li>

        <li class="l5">
            <a href="">
                <img src="images/x03.png" alt="">
            </a>
        </li>
        <li class="l5">
            <a href="">
                <img src="images/x04.png" alt="">
            </a>
        </li>
        <li class="l5">
            <a href="">
                <img src="images/x05.png" alt="">
            </a>
        </li>
        <li class="l5">
            <a href="">
                <img src="images/x06.png" alt="">
            </a>
        </li>
        <li class="l5">
            <a href="">
                <img src="images/x07.jpg" alt="">
            </a>
        </li>
    </ul>
</div>

</body>
</html>